<template>
  <div class="Page Confirm">
    <div id="bod">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <img src="~/assets/img/cart_setp2.png" class="fr">
      <div class="clear"></div>
    </div>
    <form name="flowForm" id="flowForm" method="post" action="">
      <table class="GoodList">
        <tbody>
        <tr>
          <th class="name">商品</th>
          <th class="price">原价</th>
          <th class="priceNew">价格</th>
        </tr>
        </tbody>
        <tbody>
        <!-- <tr>
          <td colspan="3" class="Title red f18 fb"><p>限时折扣</p></td>
        </tr> -->
        <tr>
          <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a target="_blank" :href="'https://localhost:3000/course/'+order.courseId">
              <img :src="order.courseCover"></a>
            <div class="goodInfo">
              <input type="hidden" class="ids ids_14502" value="14502">
              <a target="_blank" :href="'https://localhost:3000/course/'+ order.courseId">{{ order.courseTitle }}</a>
            </div>
          </td>
          <td class="price">
            <p>￥<strong>{{ order.totalFee }}</strong></p>
            <!-- <span class="discName red">限时8折</span> -->
          </td>
          <td class="red priceNew Last">￥<strong>{{ order.totalFee }}</strong></td>
        </tr>
        <tr>
          <td class="Billing tr" colspan="3">
            <div class="tr">
              <p>共 <strong class="red">1</strong> 件商品，合计<span
                class="red f20">￥<strong>{{ order.totalFee }}</strong></span></p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="Finish">
        <div class="fr" id="AgreeDiv">

          <label for="Agree"><p class="on"><input type="checkbox" checked="checked">我已阅读并同意<a href="javascript:"
                                                                                                     target="_blank">《谷粒学院购买协议》</a>
          </p></label>
        </div>
        <div class="clear"></div>
        <div class="Main fl">
          <div class="fl">
            <a :href="'/course/'+order.courseId">返回课程详情页</a>
          </div>
          <div class="fr">
            <p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strong
              id="AllPrice">{{ order.totalFee }}</strong></span></p>
          </div>
        </div>
        <input name="score" value="0" type="hidden" id="usedScore">
        <button class="fr redb" type="button" id="submitPay" @click="toPay()">去支付</button>
        <div class="clear"></div>
      </div>
    </form>
    </div>
    <iframe name="iframe_my" id="pay" style="position: fixed;top: 0%;display:none" width="80%"
            height="800px"
            :src='"http://127.0.0.1:9001/alipay/pay?subject="+this.order.courseTitle+"&traceNo="+this.order.orderNo+"&totalAmount="+this.order.totalFee'></iframe>
    <div id="zz">

    </div>
    <div id="gb">
      <button class="fr redb" type="button" id="closePay" @click="gb()">关闭</button>
    </div>
  </div>
</template>
<script>
import ordersApi from '@/api/orders'

export default {
  asyncData({params, error}) {
    return ordersApi.getOrdersInfo(params.oid)
      .then(response => {
        return {
          order: response.data.data
        }
      })
  },
  methods: {
    //去支付
    toPay() {
      var zz = document.getElementById("zz");
      zz.style.display = "block";
      var iframe = document.getElementById("pay");
      iframe.style.display = "block";
      iframe.style.zIndex = "9999";
      var gb = document.getElementById("gb");
      gb.style.display = "block";
      var gb = document.getElementById("bod");
      gb.style.display = "none";
    },
    gb() {
      var zz = document.getElementById("zz");
      zz.style.display = "none";
      var iframe = document.getElementById("pay");
      var gb = document.getElementById("gb");
      gb.style.display = "none";
      iframe.style.display = "none";
      var gb = document.getElementById("bod");
      gb.style.display = "block";
    }
  }
}
</script>
<style>
#zz {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}
#gb {
  position: fixed;
  top: 0px;
  left: 1268px;
  z-index: 9999;
  display: none;
}
#closePay{
  font-size: 12px;
  height: 26px;
  background: url(https://i.alipayobjects.com/e/201305/OzLou0mHd.png) repeat-x 0 0;
}
</style>
